/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div class="page">
    <div class="fixed-bar">
      <div class="item-title">
        <router-link
          class="back"
          :to="{name:'store_applys',params:{currentPage:$route.params.currentPage}}"
          title="返回列表"
        >
          <i class="fa fa-arrow-circle-o-left"></i>
        </router-link>
        <div class="subject">
          <h3>店铺管理 - 查看会员<{{storeApply.seller_name}}>的店铺申请信息</h3>
          <h5>店铺的申请资料操作</h5>
        </div>
      </div>
    </div>
    <el-form ref="storeApply" :model="storeApply" label-width="200px">
      <div class="ncap-form-default">
        <table class="store-joinin" cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr>
              <th colspan="20">公司及联系人信息</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>公司名称：</th>
              <td>
                <input v-model="storeApply.company_name" />
              </td>
              <th>公司性质：</th>
              <td>{{storeApply.company_type_desc}}</td>
              <th>公司网址：</th>
              <td>
                <input v-model="storeApply.company_website" />
              </td>
            </tr>
            <tr>
              <th class="w150">公司所在地：</th>
              <td
                colspan="20"
              >{{storeApply.province_name}} {{storeApply.city_name}} {{storeApply.dstrict_name}}</td>
            </tr>
            <tr>
              <th>公司详细地址：</th>
              <td>{{storeApply.company_address}}</td>
              <th>固定电话：</th>
              <td colspan="20">{{storeApply.company_telephone}}</td>
            </tr>
            <tr>
              <th>邮政编码：</th>
              <td>{{storeApply.company_zipcode}}</td>
              <th>电子邮箱：</th>
              <td>{{storeApply.company_email}}</td>
              <th>传真：</th>
              <td>{{storeApply.company_fax}}</td>
            </tr>
            <tr>
              <th>联系人姓名：</th>
              <td>
                <input v-model="storeApply.contacts_name" class="form-control" />
              </td>
              <th>联系人电话：</th>
              <td>
                <input v-model="storeApply.contacts_mobile" class="form-control" />
              </td>
              <th>联系人邮箱：</th>
              <td>
                <input v-model="storeApply.contacts_email" class="form-control" />
              </td>
            </tr>
          </tbody>
        </table>
        <table class="store-joinin" cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr>
              <th colspan="20">营业执照信息（副本）</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>营业执照号：</th>
              <td>{{storeApply.business_licence_number}}</td>
              <th>营业执照有效期：</th>
              <td
                v-if="storeApply.business_date_end"
              >{{storeApply.business_date_start}} - {{storeApply.business_date_end}}</td>
              <td v-else>长期</td>
              <th>法定经营范围：</th>
              <td>{{storeApply.business_scope}}</td>
            </tr>
            <tr>
              <th>注册资本：</th>
              <td>{{storeApply.reg_capital}}</td>
              <th>组织机构代码：</th>
              <td>{{storeApply.orgnization_code}}</td>
              <th>一般纳税人证明：</th>
              <td>{{storeApply.reg_capital}}</td>
            </tr>
            <tr>
              <th>法人代表姓名：</th>
              <td>{{storeApply.legal_person}}</td>
              <th>纳税类型税码：</th>
              <td>{{storeApply.tax_rate}}%</td>
              <th>税务登记号码：</th>
              <td>{{storeApply.attached_tax_number}}</td>
            </tr>
          </tbody>
        </table>

        <table class="store-joinin" cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr>
              <th colspan="20">开户银行信息：</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th class="w150">银行开户名：</th>
              <td>{{storeApply.bank_account_name}}</td>
            </tr>
            <tr>
              <th>公司银行账号：</th>
              <td>{{storeApply.bank_account_number}}</td>
            </tr>
            <tr>
              <th>开户银行支行名称：</th>
              <td>{{storeApply.bank_branch_name}}</td>
            </tr>
            <tr>
              <th>开户银行所在地：</th>
              <td colspan="20">{{storeApply.bank_province_name}} {{storeApply.bank_city_name}}</td>
            </tr>
          </tbody>
        </table>
        <table class="store-joinin" cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr>
              <th colspan="20">店铺经营信息</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>卖家账号：</th>
              <td>{{storeApply.seller_name}}</td>
              <th>店铺名称：</th>
              <td>{{storeApply.store_name}}</td>
              <th>店铺分类：</th>
              <td>
                <el-select v-model="storeApply.sc_id" size="small">
                  <el-option
                    v-for="item in storeClass"
                    :key="item.sc_id"
                    :label="item.sc_name"
                    :value="item.sc_id"
                  ></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <th>店铺负责人：</th>
              <td>{{storeApply.store_person_name}}</td>
              <th>负责人手机号码：</th>
              <td>{{storeApply.store_person_mobile}}</td>
              <th>负责人QQ号码：</th>
              <td>{{storeApply.store_person_qq}}</td>
            </tr>
            <tr>
              <th>店铺等级：</th>
              <td>
                <el-select v-model="storeApply.sg_id" size="small">
                  <el-option
                    v-for="item in storeGrade"
                    :key="item.sg_id"
                    :label="item.sg_name"
                    :value="item.sg_id"
                  ></el-option>
                </el-select>
              </td>
              <th>开店年限：</th>
              <td>
                <el-input
                  style="width: 100px"
                  v-model="storeApply.store_end_time"
                  onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
                  onpaste="this.value=this.value.replace(/[^\d.]/g,'')"
                />年
              </td>
              <th>店铺性质：</th>
              <td>
                <el-select v-model="storeApply.store_type" size="small">
                  <el-option
                    v-for="item in storeType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <th>付款金额：</th>
              <td>
                <input
                  name="paying_amount"
                  v-model="storeApply.paying_amount"
                  onkeyup="this.value=this.value.replace(/[^\d.]/g,'')"
                  onpaste="this.value=this.value.replace(/[^\d.]/g,'')"
                />
              </td>
              <th>付款凭证：</th>
              <td>
                <el-upload
                  :action="apiHead + '/mall/upload?type=cert'"
                  list-type="picture-card"
                  :class="{hide:hideUpload}"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove"
                  :on-change="onChange"
                  :file-list="payingAmountCertImages"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </td>
            </tr>
            <th>经营类目：</th>
            <td colspan="20">
              <table
                id="table_category"
                class="type"
                cellspacing="0"
                cellpadding="0"
                border="0"
                v-if="storeApplyStoreClassArr"
              >
                <thead>
                  <tr>
                    <th>分类1</th>
                    <th>分类2</th>
                    <th>分类3</th>
                    <th>比例</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="sasca in storeApplyStoreClassArr">
                    <td>{{sasca.class1_name}}</td>
                    <td>{{sasca.class2_name}}</td>
                    <td>{{sasca.class3_name}}</td>
                    <td>{{sasca.commission}}%</td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tbody>
        </table>
        <table class="store-joinin" cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr>
              <th colspan="20">证件信息：</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>企业营业执照副本：</th>
              <td colspan="20">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="storeApply.business_licence_cert"
                  :preview-src-list="[storeApply.business_licence_cert]"
                />
              </td>
            </tr>
            <tr>
              <th>税务登记证复印件：</th>
              <td colspan="20">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="storeApply.taxpayer_cert"
                  :preview-src-list="[storeApply.taxpayer_cert]"
                />
              </td>
            </tr>
            <tr>
              <th>织机构代码证复印件：</th>
              <td colspan="20">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="storeApply.orgnization_cert"
                  :preview-src-list="[storeApply.orgnization_cert]"
                />
              </td>
            </tr>
            <tr>
              <th>法人身份证：</th>
              <td colspan="20">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="storeApply.legal_identity_cert"
                  :preview-src-list="[storeApply.legal_identity_cert]"
                />
              </td>
            </tr>
            <tr>
              <th>店铺负责人身份证：</th>
              <td colspan="20">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="storeApply.store_person_cert"
                  :preview-src-list="[storeApply.store_person_cert]"
                />
              </td>
            </tr>
          </tbody>
        </table>
        <table class="store-joinin" cellspacing="0" cellpadding="0" border="0">
          <thead>
            <tr>
              <th colspan="20">操作信息</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>备注说明：</th>
              <td colspan="20">
                <textarea
                  v-model="storeApply.review_msg"
                  placeholder="请输入操作备注"
                  class="form-control"
                ></textarea>
              </td>
            </tr>
            <tr>
              <th>商家信息审核：</th>
              <td colspan="20">
                <el-radio-group v-model="storeApply.apply_state">
                  <el-radio :label="0">未审核</el-radio>
                  <el-radio :label="1">通过</el-radio>
                  <el-radio :label="2">未通过</el-radio>
                </el-radio-group>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="bot">
          <el-button type="primary" @click="onSubmit()">确认提交</el-button>
        </div>
      </div>
    </el-form>
    <el-dialog :visible.sync="dialogVisible" :modal-append-to-body="false">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>

<script>
import {
  getStoreApply,
  getStoreGradeList,
  getStoreClass,
  updateStoreApply,
  getStoreApplyStoreClassInfo
} from "@/utils/api";
export default {
  data() {
    return {
      currentPage: this.$route.params.currentPage || 1,
      userId: this.$route.params.userId,
      sgId: this.$route.params.sgId,
      storeId: this.$route.params.storeId,
      storeApply: {
        seller_name: "",
        store_type: null,
        apply_state: null,
        paying_amount: 0
      },
      storeGrade: [
        {
          sg_id: 0,
          sg_name: "未选择"
        }
      ],
      storeClass: null,
      storeApplyStoreClassArr: null,
      storeType: [
        {
          value: 0,
          label: "未选择"
        },
        {
          value: 1,
          label: "旗舰店"
        },
        {
          value: 2,
          label: "专卖店"
        },
        {
          value: 3,
          label: "专营店"
        }
      ],
      dialogImageUrl: "",
      dialogVisible: false,
      hideUpload: false,
      payingAmountCertImages: []
    };
  },
  created() {
    this.getStoreApply();
    this.getStoreGradeList();
    this.getStoreClass();
  },
  methods: {
    getStoreApply() {
      var that = this;
      getStoreApply({
        user_id: that.userId
      }).then(function(res) {
        res.store_end_time = 1; //输入框默认开店一年
        res.paying_amount = res.paying_amount.toFixed(2);
        if (res.paying_amount_cert) {
          //展示付款凭证
          that.payingAmountCertImages = [{ url: res.paying_amount_cert }];
          that.hideUpload = true;
        }
        that.storeApply = res;
        //获取申请的分类信息
        getStoreApplyStoreClassInfo({
          class_ids: res.store_class_ids
        }).then(res => {
          that.storeApplyStoreClassArr = res;
        });
      });
    },
    getStoreGradeList() {
      var that = this;
      getStoreGradeList().then(function(res) {
        res.forEach(e => {
          var grade = {
            sg_id: e.sg_id,
            sg_name: e.sg_name
          };
          that.storeGrade.push(grade);
        });
      });
    },
    getStoreClass() {
      var that = this;
      getStoreClass().then(function(res) {
        that.storeClass = res;
      });
    },
    onSubmit() {
      var that = this;
      this.storeApply.sc_name = this.storeClass.find(item => {
        return item.sc_id === that.storeApply.sc_id;
      }).sc_name;
      updateStoreApply(that.storeApply).then(function(res) {
        if (res.status == 1) {
          that.$message({
            message: "保存成功",
            type: "success",
            onClose: function() {
              that.$router.push({ name: "store_applys" });
            }
          });
        } else {
          that.$message.error("保存失败" + res.msg);
        }
      });
    },
    handleAvatarSuccess(res) {
      this.storeApply.paying_amount_cert = res.result;
      this.$forceUpdate();
    },
    beforeAvatarUpload(file) {
      const isPic =
        file.type === "image/gif" ||
        file.type === "image/jpg" ||
        file.type === "image/jpeg" ||
        file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isPic) {
        this.$message.error("上传图片只能是 JPG、JPEG、PNG、GIF 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return isPic && isLt2M;
    },
    onChange(file, fileList) {
      this.hideUpload = fileList.length >= 1;
    },
    handleRemove(file, fileList) {
      this.storeApply.paying_amount_cert = "";
      this.hideUpload = fileList.length >= 1;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  }
};
</script>

<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>
